<template>
  <a-drawer
    maskClosable
    :closable="false"
    :maskStyle="{'background-color':'rgba(0, 0, 0, 0)'}"
    placement="right"
    width="300"
    :visible="show"
    @close="close"
  >
    <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item v-for="(item,index) in attr" :key="index" :label="item.title">
        <a-input v-if="item.type == 'input'" v-model="item.value" />
        <a-textarea v-if="item.type == 'textarea'" v-model="item.value" :rows="4" />
        <a-switch v-if="item.type == 'switch'" v-model="item.value" />
        <drawerSelect v-if="item.type == 'select'" :value.sync="item.value" :list="item.list" />
        <each v-if="item.type == 'each'" :list.sync="item.value" />
        <picSelect v-if="item.type == 'picSelect'" :pic.sync="item.value"></picSelect>
        <setForm v-if="item.type == 'form'" :list.sync="item.value"></setForm>
        <setEditor v-if="item.type == 'editor'" :list.sync="item.value"></setEditor>
        <setCell v-if="item.type == 'setCell'" :list.sync="item.value"></setCell>
        <luckyBlocks v-if="item.type == 'lucky-blocks'" :list.sync="item.value"></luckyBlocks>
        <luckyPrizes v-if="item.type == 'lucky-prizes'" :list.sync="item.value"></luckyPrizes>
        <luckyButtons v-if="item.type == 'lucky-buttons'" :list.sync="item.value"></luckyButtons>
        <iconSelect v-if="item.type == 'iconSelect'" @change="e=>item.value = e" :value="item.value"></iconSelect>
        <setSteps v-if="item.type == 'setSteps'" :list.sync="item.value"></setSteps>
      </a-form-model-item>
    </a-form-model>
    <a-button type="danger" @click="remove(index)">
      删除组件
    </a-button>
  </a-drawer>
</template>

<script>
import each from '../each'
import picSelect from '../pic-select'
import setForm from '../setForm'
import setEditor from '../setEditor'
import setCell from '../setCell'
import luckyBlocks from '../lucky-blocks'
import luckyPrizes from '../lucky-prizes'
import luckyButtons from '../lucky-buttons'
import iconSelect from '../iconSelector'
import setSteps from '../setSteps'
import drawerSelect from '../select'

export default {
  components:{
    each,
    picSelect,
    setForm,
    setEditor,
    setCell,
    luckyBlocks,
    luckyPrizes,
    luckyButtons,
    iconSelect,
    setSteps,
    drawerSelect
  },
  name:"drawer",
  props:{
    show:{
      type:Boolean,
      default:false
    },
    attr:{
      type:Array,
      default:[]
    },
    index:{
      type:Number
    }
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    }
  },
  methods: {
    close(){
      this.$emit("update:show",false)
    },
    remove(index){
      this.$store.commit("drawing/removeContent",index)
    }
  },
  watch:{
    attr:{
      handler(newVal){
        this.$emit("change",newVal)
      },
      deep:true
    },
  }
}
</script>

<style scoped>
  
</style>